<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- saved from url=(0082)http://nettutsplus.s3.amazonaws.com/31_fireflyEffect/demo%20and%20source/index.htm -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		
		<title>The Firefly Effect</title>
		<style>
			body {
				margin: 0;
				background: #000;
			}
		</style>
	</head>
	<body>
		
<script type="text/javascript" src="./The Firefly Effect_files/jquery.min.js"></script>
<script type="text/javascript">
function Particle() {
	this.path = 'images/';
	this.images = ['particle1.png', 'particle2.png', 'particle3.png', 'particle4.png'];
	
//	Randomly Pick a Particle Model
	this.image = this.images[randomInt(this.images.length)];
	this.file = this.path + this.image;
	
//	Create a Particle DOM
	this.element = document.createElement('img');
	
	this.speed().newPoint().display().newPoint().fly();
};

//	Generate Random Speed
Particle.prototype.speed = function() {
	this.duration = (randomInt(10) + 5) * 1100;
	
	return this;
};

//	Generate a Random Position
Particle.prototype.newPoint = function() {
	this.pointX = randomInt(window.innerWidth - 100);
	this.pointY = randomInt(window.innerHeight - 100);
	
	return this;
};

//	Display the Particle
Particle.prototype.display = function() {
	$(this.element)
		.attr('src', this.file)
		.css('position', 'absolute')
		.css('top', this.pointY)
		.css('left', this.pointX);
	$(document.body).append(this.element);
	
	return this;
};

//	Animate Particle Movements
Particle.prototype.fly = function() {
	var self = this;
	$(this.element).animate({
		"top": this.pointY,
		"left": this.pointX,
	}, this.duration, 'linear', function(){
		self.speed().newPoint().fly();
	});
};

function randomInt(max) {
//	Generate a random integer (0 <= randomInt < max)
	return Math.floor(Math.random() * max);
}

$(function(){
	var total = 50;
	var particles = [];
	
	for (i = 0; i < total; i++){
		particles[i] = new Particle();
	}
});
</script>
		
	
<img src="./The Firefly Effect_files/particle2.png" style="position: absolute; top: 238px; left: 48.82828282828282px; "><img src="./The Firefly Effect_files/particle4.png" style="position: absolute; top: 96.38863636363637px; left: 322.4022727272727px; "><img src="./The Firefly Effect_files/particle2.png" style="position: absolute; top: 159.0593388429752px; left: 191.43404958677687px; "><img src="./The Firefly Effect_files/particle4.png" style="position: absolute; top: 295.5235064935065px; left: 532.1511038961039px; "><img src="./The Firefly Effect_files/particle2.png" style="position: absolute; top: 168.50628099173554px; left: 303.0378512396694px; "><img src="./The Firefly Effect_files/particle4.png" style="position: absolute; top: 221.31154545454544px; left: 318.6086363636364px; "><img src="./The Firefly Effect_files/particle3.png" style="position: absolute; top: 152.599173553719px; left: 315.5611570247934px; "><img src="./The Firefly Effect_files/particle3.png" style="position: absolute; top: 50.8627972027972px; left: 353.9334265734266px; "><img src="./The Firefly Effect_files/particle4.png" style="position: absolute; top: 212.54784090909092px; left: 462.8429545454545px; "><img src="./The Firefly Effect_files/particle4.png" style="position: absolute; top: 117.96694214876032px; left: 328.94380165289255px; "><img src="./The Firefly Effect_files/particle2.png" style="position: absolute; top: 114.21167832167833px; left: 178.13230769230768px; "><img src="./The Firefly Effect_files/particle3.png" style="position: absolute; top: 269.6338181818182px; left: 115.755px; "><img src="./The Firefly Effect_files/particle4.png" style="position: absolute; top: 222.4px; left: 179.7px; "><img src="./The Firefly Effect_files/particle4.png" style="position: absolute; top: 263.1369696969697px; left: 508.8478787878788px; "><img src="./The Firefly Effect_files/particle2.png" style="position: absolute; top: 48.7268831168831px; left: 305.792987012987px; "><img src="./The Firefly Effect_files/particle3.png" style="position: absolute; top: 161.01752066115702px; left: 166.51619834710743px; "><img src="./The Firefly Effect_files/particle3.png" style="position: absolute; top: 115.12767676767677px; left: 208.47636363636366px; "><img src="./The Firefly Effect_files/particle3.png" style="position: absolute; top: 194.05297520661156px; left: 521.2671900826447px; "><img src="./The Firefly Effect_files/particle2.png" style="position: absolute; top: 40.17402597402597px; left: 408.08051948051946px; "><img src="./The Firefly Effect_files/particle2.png" style="position: absolute; top: 198.18560606060606px; left: 395.4962121212121px; "><img src="./The Firefly Effect_files/particle1.png" style="position: absolute; top: 86.36250000000001px; left: 150.0115909090909px; "><img src="./The Firefly Effect_files/particle4.png" style="position: absolute; top: 265.8757575757576px; left: 50.62060606060606px; "><img src="./The Firefly Effect_files/particle1.png" style="position: absolute; top: 171.7153846153846px; left: 80.98692307692308px; "><img src="./The Firefly Effect_files/particle4.png" style="position: absolute; top: 49.78846153846154px; left: 474.41923076923075px; "><img src="./The Firefly Effect_files/particle4.png" style="position: absolute; top: 136.90530303030303px; left: 540.7916666666666px; "><img src="./The Firefly Effect_files/particle3.png" style="position: absolute; top: 136.65681818181818px; left: 59.96787878787879px; "><img src="./The Firefly Effect_files/particle3.png" style="position: absolute; top: 105.555px; left: 184.5359090909091px; "><img src="./The Firefly Effect_files/particle3.png" style="position: absolute; top: 254.78636363636363px; left: 290.1045454545455px; "><img src="./The Firefly Effect_files/particle1.png" style="position: absolute; top: 266.4218181818182px; left: 390.9736363636364px; "><img src="./The Firefly Effect_files/particle2.png" style="position: absolute; top: 113.25px; left: 439.075px; "><img src="./The Firefly Effect_files/particle2.png" style="position: absolute; top: 159.9761038961039px; left: 376.1844155844156px; "><img src="./The Firefly Effect_files/particle2.png" style="position: absolute; top: 170.1674025974026px; left: 298.3348051948052px; "><img src="./The Firefly Effect_files/particle2.png" style="position: absolute; top: 271.6818181818182px; left: 236.54545454545453px; "><img src="./The Firefly Effect_files/particle3.png" style="position: absolute; top: 96.30988636363637px; left: 456.81522727272727px; "><img src="./The Firefly Effect_files/particle2.png" style="position: absolute; top: 246.45454545454547px; left: 296.17px; "><img src="./The Firefly Effect_files/particle3.png" style="position: absolute; top: 131.10254545454546px; left: 338.76363636363635px; "><img src="./The Firefly Effect_files/particle4.png" style="position: absolute; top: 247.99636363636364px; left: 424.66545454545457px; "><img src="./The Firefly Effect_files/particle4.png" style="position: absolute; top: 183.22402597402598px; left: 449.74285714285713px; "><img src="./The Firefly Effect_files/particle3.png" style="position: absolute; top: 19.846969696969698px; left: 463.7848484848485px; "><img src="./The Firefly Effect_files/particle1.png" style="position: absolute; top: 274.71252525252527px; left: 121.35535353535354px; "><img src="./The Firefly Effect_files/particle1.png" style="position: absolute; top: 51.702097902097904px; left: 228.61433566433567px; "><img src="./The Firefly Effect_files/particle4.png" style="position: absolute; top: 144.67834710743801px; left: 188.73363636363635px; "><img src="./The Firefly Effect_files/particle3.png" style="position: absolute; top: 292.6111363636364px; left: 21.338863636363637px; "><img src="./The Firefly Effect_files/particle2.png" style="position: absolute; top: 123.66446280991735px; left: 269.23570247933884px; "><img src="./The Firefly Effect_files/particle2.png" style="position: absolute; top: 174.98375px; left: 64.55125px; "><img src="./The Firefly Effect_files/particle4.png" style="position: absolute; top: 301.82613636363635px; left: 302.21818181818185px; "><img src="./The Firefly Effect_files/particle2.png" style="position: absolute; top: 226.12012987012986px; left: 432.67415584415585px; "><img src="./The Firefly Effect_files/particle2.png" style="position: absolute; top: 248.19670454545454px; left: 382.32272727272726px; "><img src="./The Firefly Effect_files/particle2.png" style="position: absolute; top: 69.6435064935065px; left: 36.484415584415586px; "><img src="./The Firefly Effect_files/particle3.png" style="position: absolute; top: 187.52727272727273px; left: 414.64190909090905px; "></body></html>